<template>
    <div>
      <div class="container">
            <el-row :gutter="18">
                <el-col :span="6"><div class="text">上午开盘时间：{{setting.morningOpenTime}} 至 {{setting.morningCloseTime}}</div></el-col>
                <el-col :span="6"><div class="text">下午开盘时间：{{setting.afternoonOpenTime}} 至 {{setting.afternoonCloseTime}}</div></el-col>
                <el-col :span="3"><div class="text">周六收盘：<span v-html="setting.saturdayIsClose==0?'否':'是'"></span></div></el-col>
                <el-col :span="3"><div class="text">周日收盘：<span v-html="setting.sundayIsClose==0?'否':'是'"></span></div></el-col>
            </el-row>
        </div>
        <div class="filter-container">
            <span class="tip">商品分类:</span>
                <el-select v-model="form.tradeType" placeholder="请选择商品分类" @change="tranTypeClick(form.tradeType)">
                    <el-option :label="item.tradeTypeName" :value="item.tradeType" v-for="(item,index) in GoodsTradeTypeList" :key="index"></el-option>
                  
                </el-select>
            <span class="tip">商品选择:</span>
            <el-select clearable class="male filter-item" style="width: 250px" v-model="status" placeholder="请选择商品"  @change="btn(status)">
                <el-option v-for="(item,index) in typeOptions" :key="index" :label="item.name" :value="item.goods_no">
                </el-option>
            </el-select>
            
            <el-button class="filter-item male" type="primary" icon="el-icon-search" @click="handleFilter">查询</el-button>
        </div>
        <div class="business" v-show="isSubAccount==1">
            <el-form :model="form"  ref="form" label-width="80px"  style="display: inline-block;">
                <el-form-item label="商品名称:" style="display: inline-block;">
                    <el-input v-html="text" placeholder="" style="width:200px;"></el-input>
                </el-form-item>
                <el-form-item label="价格" style="display: inline-block;">
                    <el-input v-model="form.price" placeholder="" style="width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="数量" style="display: inline-block;">
                    <el-input v-model="form.unit" placeholder="" style="width:100px;" type="number"></el-input>
                </el-form-item>
            </el-form>
            <el-button class="filter-item male" type="primary" @click="Visible = true" style=" margin-left: 20px;">购买</el-button>
            <el-button class="filter-item male" type="primary" @click="Visibleadd = true">寄售</el-button>
        </div>
        <el-dialog title="确认结算" :visible.sync="Visible" center>
            <el-form :model="form">
                <el-form-item label="买入价格">
                    <el-input v-html="'￥'+form.price"  style="width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="买入数量">
                    <el-input v-html="form.unit"  style="width:100px;" type="number"></el-input>
                </el-form-item>
                <el-form-item label="服务费用">
                    <el-input v-html="'￥'+form.unit*form.price*setting.merchantPayChargeRatio"  style="width:100px;"></el-input>
                </el-form-item>
                <!-- <el-form-item label="交易密码">
                    <el-input v-model="form.tranPass" placeholder="请输入交易密码" :maxlength="6" style="width:200px;"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visible = false">取 消</el-button>
                <el-button type="primary" @click="btn1()">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="确认结算" :visible.sync="Visibleadd" center>
            <el-form :model="form">
                <el-form-item label="寄售价格">
                    <el-input v-html="'￥'+form.price"  style="width:100px;"></el-input>
                </el-form-item>
                <el-form-item label="寄售数量">
                    <el-input v-html="form.unit"  style="width:100px;" type="number"></el-input>
                </el-form-item>
                <el-form-item label="服务费用">
                    <el-input v-html="'￥'+form.unit*form.price*setting.merchantConsignChargeRatio"  style="width:100px;"></el-input>
                </el-form-item>
                <!-- <el-form-item label="交易密码">
                    <el-input v-model="form.tranPass" placeholder="请输入交易密码" :maxlength="6" style="width:200px;"></el-input>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="Visibleadd = false">取 消</el-button>
                <el-button type="primary" @click="btn2()">确 定</el-button>
            </div>
        </el-dialog>
        <div id="myChart">
            <div id="myChart2" :style="{width: '99%', height: '300px'}"></div>
            <div id="myChart1" :style="{width: '99%', height: '300px'}"></div>
        </div>
        <div style="width: 20%;float:left; ">
            <el-button  @click="getfiveDown" style="width: 47%;">五挡</el-button>
            <el-button  @click="getfreeDetail" style="width: 47%;">明细</el-button>
            <el-table :data="detail" border fit highlight-current-row max-height="660" v-if="show">
                <el-table-column align="center" label="商品名称">
                    
                    <el-table-column align="center" label="类型" v-if="!show">
                        <template slot-scope="scope">
                            <span v-html="scope.row.entrustType===1?'寄售'+(scope.$index+1):'购买'+(scope.$index+1)"></span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="时间" v-if="show">
                        <template slot-scope="scope">
                            <span>{{scope.row.applyTime}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="价格">
                        <template slot-scope="scope">
                            <span>{{scope.row.entrustPrice}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" label="数量">
                        <template slot-scope="scope">
                            <span v-if="scope.row.entrustType===0" style="color:#f00">{{scope.row.entrustCount}}</span>
                            <span v-if="scope.row.entrustType===1" style="color:green">{{scope.row.entrustCount}}</span>
                        </template>
                    </el-table-column>
                </el-table-column>
            </el-table>
            <el-table id="nostyle" border fit highlight-current-row  v-if="!show">
                <el-table-column align="center" label="商品名称">
                    <el-table-column align="center" label="类型" >
                    </el-table-column>
                    <el-table-column align="center" label="价格">
                    </el-table-column>
                    <el-table-column align="center" label="数量">
                    </el-table-column>
                </el-table-column>
            </el-table>
            <table cellspacing="0" cellpadding="0" border="1" class="table" v-if="!show">
                <tr>
                    <th style="color:green">卖5</th>
                    <th>{{Price5}}</th>
                    <th>{{Count5}}</th>
                </tr>		
                <tr>
                    <th style="color:green">卖4</th>
                    <th>{{Price4}}</th>
                    <th>{{Count4}}</th>
                </tr>	
                <tr>
                    <th style="color:green">卖3</th>
                   <th>{{Price3}}</th>
                    <th>{{Count3}}</th>
                </tr>
                <tr>
                    <th style="color:green">卖2</th>
                    <th>{{Price2}}</th>
                    <th>{{Count2}}</th>
                </tr>		
                <tr>
                    <th style="color:green">卖1</th>
                    <th>{{Price1}}</th>
                    <th>{{Count1}}</th>
                </tr>	
                <br>
                <tr >
                    <th style="color:#f00">买1</th>
                    <th>{{Price6}}</th>
                    <th>{{Count6}}</th>
                </tr>
                <tr>
                    <th style="color:#f00">买2</th>
                   <th>{{Price7}}</th>
                    <th>{{Count7}}</th>
                </tr>		
                <tr>
                    <th style="color:#f00">买3</th>
                    <th>{{Price8}}</th>
                    <th>{{Count8}}</th>
                </tr>	
                <tr>
                    <th style="color:#f00">买4</th>
                    <th>{{Price9}}</th>
                    <th>{{Count9}}</th>
                </tr>
                <tr>
                    <th style="color:#f00">买5</th>
                    <th>{{Price10}}</th>
                    <th>{{Count10}}</th>
                </tr>
            </table>
        </div>
        <el-table :data="list" border fit highlight-current-row max-height="590" style="width: 50%;" id="tableList">
            <el-table-column align="center" label="实时委托单监控">
            <el-table-column align="center" label="委托时间">
                <template slot-scope="scope">
                <span>{{scope.row.createTime}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="委托单号">
                <template slot-scope="scope">
                <span>{{scope.row.entrustNumber}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="委托类型">
                <template slot-scope="scope">
                <span v-html="scope.row.entrustType==0?'购买':'寄售'"></span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="委托数量">
                <template slot-scope="scope">
                <span>{{scope.row.entrustCount}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="委托价格">
                <template slot-scope="scope">
                <span>{{scope.row.entrustPrice}}</span>
                </template>
            </el-table-column>
            <el-table-column align="center" label="委托状态">
                <template slot-scope="scope">
                <span v-html="scope.row.entrustStatus==1?'委托中':scope.row.entrustStatus==2?'已完成':scope.row.entrustStatus==3?'已撤销':'已失效'"></span>
                </template>
            </el-table-column>
            </el-table-column>
        </el-table>
        <div class="pagination-container">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[5,10,20,30,40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
        </div>
    </div>
</template>

<script>
import * as echarts from '../../style/echarts.min.js';
export default {
  data() {
    return {
      form: { 
        price:'',
        unit:'',
        tranPass: ''
        },
        Price1:'--',
        Price2:'--',
        Price3:'--',
        Price4:'--',
        Price5:'--',
        Price6:'--',
        Price7:'--',
        Price8:'--',
        Price9:'--',
        Price10:'--',
        Count10:'--',
        Count9:'--',
        Count8:'--',
        Count7:'--',
        Count6:'--',
        Count5:'--',
        Count4:'--',
        Count3:'--',
        Count2:'--',
        Count1:'--',
      show: false,
      isSubAccount: JSON.parse(localStorage.getItem("userInfo")).isSubAccount,
      Visibleadd: false,
      Visible: false,
      text: '暂无',
      list: null,
      detail: null,
      detail1:'',
      detail2:'',
      setting: '',
      total: 0,
      status: '',
      typeOptions:[],
      fs:'',
      cj: '',
      currentPage: 1,
      pageSize: 10,
      seriesArea:[],
      seriesstr:[],
      GoodsTradeTypeList:[]
    
    }
  },
  created() {
    this.getList()
    this.getSetting()
    this.getcjEcharts()
    this.getfsEcharts()
   
    this.getGoodsTradeTypeList();
  },
  mounted() {
  },
  methods: {
      btn(text){
         for(var i=0;i<this.typeOptions.length;i++){
             if(text == this.typeOptions[i].goods_no){
                 this.text = this.typeOptions[i].name
             }   
         }
      },
      tranTypeClick(id){
       this.getlistGoods(id)
      },
      async getGoodsTradeTypeList(state){
            let {data} = await this.$post({
                api:'/api/goods/getGoodsTradeTypeList',
                
            })
            if(data.code === 0){
                this.GoodsTradeTypeList = data.data;
                
                console.log(data)
            }
        },
      btn1(){
        var that = this
        if(!that.Visible){
            return
        }
        that.$post({
            api: "/tran/entrustApply",
            data: {
               userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                productNo: that.status,
                entrustPrice: that.form.price,
                entrustType: 0,
                entrustCount:that.form.unit,
                // transPassword: that.form.tranPass
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.Visible = false
           this.$notify({
                title: '成功',
                message: '买入成功',
                type: 'success',
                duration: 2000
            })
        }else{
            that.Visible = false
            this.$notify({
                title: '失败',
                message: data.msg,
                duration: 2000
            })
        }
        console.log("entrustApply",data)
        });
    },
    btn2(){
        var that = this
        if(!that.Visibleadd){
            return
        }
        that.$post({
            api: "/tran/entrustApply",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                productNo: that.status,
                entrustPrice: that.form.price,
                entrustType: 1,
                entrustCount:that.form.unit,
                // transPassword: that.form.tranPass
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.Visibleadd = false
           this.$notify({
                title: '成功',
                message: '寄售成功',
                type: 'success',
                duration: 2000
            })
        }else{
            that.Visibleadd = false
            this.$notify({
                title: '失败',
                message: data.msg,
                duration: 2000
            })
        }
        console.log("entrustApply",data)
        });
    },
    drawLine1(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.echarts.init(document.getElementById("myChart1"),'dark')
        // 绘制图表
        myChart.setOption({
            // title: { text: "在Vue中使用echarts" },
             tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#ccc',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        textStyle: {
                            color: '#222'
                        }
                    }
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.cj.xAxis.data
                
            },
            yAxis: {
                name : '成交量',
                type: 'value',
                // axisLine: {onZero: false},
                data: this.cj.yAxis.data,
                // axisLabel: {
                //     formatter: '{value}'
                // },
                // boundaryGap: false,
            },
            series: [{
                data: this.cj.series.data,
                type: 'line'
            }]
        });
    },
    drawLine2(){
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.echarts.init(document.getElementById("myChart2"),'dark')
        // 绘制图表
        myChart.setOption({
            // title: { text: "在Vue中使用echarts" },
             tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    animation: false,
                    label: {
                        backgroundColor: '#ccc',
                        borderColor: '#aaa',
                        borderWidth: 1,
                        shadowBlur: 0,
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        textStyle: {
                            color: '#222'
                        }
                    }
                },
            },
            xAxis: {
                type: 'category',
                boundaryGap: false,
                data: this.fs.xAxis.data,
                
            },
            yAxis: [
                {
                    name : '成交价',
                    type: 'value',
                    
                    data: this.fs.y1Axis.data,
                    min:this.fs.y1Axis.data[0],
                    max:this.fs.y1Axis.data[this.fs.y1Axis.data.length-1]
                },
                {
                    name : '跌涨幅',
                    type: 'category',
                    boundaryGap: false,
                    data: this.fs.y2Axis.data,
                   
                },
            ],
            series: [{
                data: this.fs.series.data,
                type: 'line'
            }]
        });
    },
     getcjEcharts(){
      var that = this
      that.$post({
            api: "/tran/cjEcharts",
            data:{
                productNo: that.status
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.cj = data.data;
            that.drawLine1()  
        }
        console.log("cjEcharts",data.data)
        });
    },
     getfsEcharts(){
      var that = this
      that.$post({
            api: "/tran/fsEcharts",
            data:{
                productNo: that.status
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.fs = data.data;
            that.drawLine2()  
        }
        console.log("fsEcharts",data)
        });
    },
    getfiveDown(){
       var that = this
       that.show = false
        that.Price1 = '--'
        that.Count1 = '--'
        that.Price2 = '--'
        that.Count2 = '--'
        that.Price3 = '--'
        that.Count3 = '--'
        that.Price4 = '--'
        that.Count4 = '--'
        that.Price5 = '--'
        that.Count5 = '--'

        that.Price6 = '--'
        that.Count6 = '--'
        that.Price7 = '--'
        that.Count7 = '--'
        that.Price8 = '--'
        that.Count8 = '--'
        that.Price9 = '--'
        that.Count9 = '--'
        that.Price10 = '--'
        that.Count10 = '--'
        that.$post({
                api: "/tran/fiveDown",
                data:{
                    userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                    productNo: that.status,
                    entrustType: 0,
                    currentPage: 1,
                    pageSize: 5,
                }
            }).then(({ data }) => {
            if(data.code === 0){
                that.detail1 = data.data.list
                that.Price6 =  data.data.list[0].entrustPrice || '--'
                that.Count6 =  data.data.list[0].entrustCount || '--'
                that.Price7 =  data.data.list[1].entrustPrice || '--'
                that.Count7 =  data.data.list[1].entrustCount || '--'
                that.Price8 =  data.data.list[2].entrustPrice || '--'
                that.Count8 =  data.data.list[2].entrustCount || '--'
                that.Price9 =  data.data.list[3].entrustPrice || '--'
                that.Count9 =  data.data.list[3].entrustCount || '--'
                that.Price10 =  data.data.list[4].entrustPrice || '--'
                that.Count10 =  data.data.list[4].entrustCount || '--'
            }
            console.log("getfiveDown",data)
        });
         that.$post({
                api: "/tran/fiveDown",
                data:{
                    userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                    productNo: that.status,
                    entrustType: 1,
                    currentPage: 1,
                    pageSize: 5,
                }
            }).then(({ data }) => {
            if(data.code === 0){
                that.detail2 = data.data.list
                that.Price1 =  data.data.list[0].entrustPrice || '--'
                that.Count1 =  data.data.list[0].entrustCount || '--'
                that.Price2 =  data.data.list[1].entrustPrice || '--'
                that.Count2 =  data.data.list[1].entrustCount || '--'
                that.Price3 =  data.data.list[2].entrustPrice || '--'
                that.Count3 =  data.data.list[2].entrustCount || '--'
                that.Price4 =  data.data.list[3].entrustPrice || '--'
                that.Count4 =  data.data.list[3].entrustCount || '--'
                that.Price5 =  data.data.list[4].entrustPrice || '--'
                that.Count5 =  data.data.list[4].entrustCount || '--'
            }
            console.log("getfiveDown",data)
        });
        that.detail = [...that.detail2,...that.detail1]
        console.log("测试",that.detail)
    },
    // getfiveDown1(){
    //    var that = this
    //    that.show = false
    
        
    // },
    // getfiveDown2(){
    //    var that = this
    //    that.show = false
    
       
    // },
    getfreeDetail(){
      var that = this
      that.show = true
      that.$post({
            api: "/tran/freeDetail",
            data:{
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                productNo: that.status,
                currentPage: 1,
                pageSize: 1000000,
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.detail = data.data.list;
        }
        console.log("freeDetail",data)
        });
    },
    getlistGoods(id){
      var that = this
      that.$post({
            api: "/menu/listGoods",
            data:{
                tradeType:id
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.typeOptions = data.data;
        }
        console.log("listGoods",data)
        });
    },
    
    getSetting(){
      var that = this
      that.$post({
            api: "/tran/getSetting",
            data:{
                userName: JSON.parse(localStorage.getItem("userInfo")).userId
            }
        }).then(({ data }) => {
        if(data.code === 0){
            that.setting = data.data
        }
        console.log("getSetting",data)
        });
    },
     getList(){
      var that = this
      that.$post({
            api: "/tran/realEntrustList",
            data: {
                userId: JSON.parse(localStorage.getItem("userInfo")).userId,
                productNo: that.status,
                currentPage: that.currentPage,
                pageSize: that.pageSize,
            }

        }).then(({ data }) => {
        if(data.code === 0){
            that.list = data.data.list
            that.total = data.data.total
        }
        console.log("accountCzTxJl",data)
        });
    },
    //  
    handleSizeChange(val) {
      this.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getList()
    },
    handleFilter() {
        this.currentPage = 1
        this.getList()
        this.getSetting()
        this.getcjEcharts()
        this.getfsEcharts()
        this.getfiveDown()
    },
  }
}
</script>

<style lang="scss" scoped>
.filter-container{
    margin: 30px 0;
    .tip{
        margin-right: 10px;
    }
}
#myChart{
    width: 30%;
    display: inline-block;
    float:left;
}
.table{
    width: 324px;
    table-layout: fixed;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px #eee solid;
    tr{
        margin: 0;
        padding: 0;
        border: 0;
        height: 48px;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        th{
            line-height: 48px;
            border: 0.1px #eee solid;
        }
    }
}
</style>
<style>
#nostyle .el-table__body-wrapper {
    display: none;
}
</style>
